<template>
  <view class="content">
    <ProductSearch @search="search" :has-scan="false"></ProductSearch>

    <view class="list">
      <view class="card" v-for="(item, i) in admitList" :key="i">
        <view @click="admitDetail(item)">
          <view class="datatitle">{{ item.id }}</view>
          <el-row :gutter="10">
            <el-col :span="24">
              <view class="label">{{$t(`admit.tag.title`)}}</view>
              <view class="tagbox">
                <el-tag v-for="tag in item.customerGoodss" :key="tag" class="tag">
                  {{ tag?.goods }}
                </el-tag>
              </view>
            </el-col>
            <el-col :span="12">
              <view class="label">{{$t(`admit.tag.time`)}}</view>
              <view class="text">
                {{ formatDate(item.receptionTime) }}
              </view>
            </el-col>
            <el-col :span="12">
              <view class="label">{{$t(`admit.tag.num`)}}</view>
              <view class="text">
                {{ item.hislist?.length }}
              </view>
            </el-col>
          </el-row>
        </view>
      </view>
    </view>
    <el-button class="fixedBtn" type="primary" round @click="addBtn">+ {{$t(`global.record`)}}</el-button>
  </view>
</template>

<script lang="ts" setup>
import * as admitApi from '@/service/api/hkb/admit/index'
import { Navigate } from '@/utils';
import Storage from "@/modal/useStorage";
import ProductSearch from '../components/productSearch.vue'
import { formatDate } from '@/utils/formatTime'
import i18n from '@/main'
onReady(() => {
  uni.setNavigationBarTitle({
    title: i18n.global.locale === 'zh' ? '客户接待' : 'ADMIT'
  });
})
const admitList = ref()
const queryParams = ref<any>({
  pageNo: 1,
  pageSize: 10000,
  automaticNumber: ''
})
const admitDetail = (item: any) => {
  Storage.set('admitDetail', { admit: item, isAdd: false, isEdit: false })
  Navigate.to('/pages/hkb/admit/detail')
}
const search = async (val?: string) => {
  queryParams.value.automaticNumber = val
  const res = await admitApi.getList(queryParams.value)
  res.list.forEach((e: any) => {
    e.customerGoodss = e.customerGoodss.filter((g: any) => g)
  })
  admitList.value = res.list
}
const addBtn = () => {
  Storage.set('admitDetail', { admit: null, isAdd: true, isEdit: false })
  Navigate.to('/pages/hkb/admit/detail')
}
onLoad(() => {
  search()
})
</script>

<style scoped lang="scss">
.list {
  padding: 0 20rpx;

  .card {
    padding: 20rpx;
    background: #fff;
    margin-bottom: 20rpx;
    border-radius: 6rpx;
    box-shadow: 0 2rpx 4rpx #bbb;
  }

  .datatitle {
    font-size: 25rpx;
    font-weight: 600;
  }

  .image {
    width: 100rpx;
    height: 100rpx;
  }

  .label {
    font-size: 25rpx;
    color: #9e9e9e;
    margin: 15rpx 0;
  }

  .tagbox {
    display: inline-flex;

    .tag {
      margin-right: 10rpx;
    }
  }

  .text {
    font-size: 24rpx;
  }
}</style>
